<style lang="css" scoped>
.aabox {
    width: 100vw;
    height: 3rem;
    border: 1px solid rgb(233, 229, 229);

    .zyh {
        display: flex;
        align-items: center;
        justify-content: space-between;

        h3 {
            margin-left: 0.5rem;
            margin-top: 0.2rem;
        }

        h4 {
            margin-top: 0.2rem;
            margin-right: 0.5rem;
            color: red;
        }
    }

    .listaaa {
        margin-left: 0.5rem;
        margin-top: 0.4rem;
    }

    .time {
        float: right;
        margin-top: 0.6rem;
        color: gray;
    }
}
</style>
<template>
    <div class="patienthomeBox">
        <!-- 头部 -->
        <homeTop></homeTop>
        <!-- 导航加内容 -->
        <div v-if="isLoading">加载中...</div>
        <div v-else>
            <van-tabs v-model:active="active">
                <van-tab v-for="(item, index) in dataList" :key="item.id" :title="item.departmentName">
                    <div v-if="active === index">
                        <div v-if="sickCircleList[index]?.length">
                            <div v-for="circle in sickCircleList[index]" :key="circle.id" class="aabox"
                                @click="goToDetail(circle.sickCircleId)">
                                <div class="zyh">
                                    <h3>{{ circle.title }}</h3>
                                    <h4>数额：{{ circle.amount }}</h4>
                                </div>
                                <p class="listaaa">{{ circle.detail }}</p>
                                <p class="time">发布时间：{{ dayjs(circle.releaseTime).format('YYYY-MM-DD') }}</p>
                            </div>
                        </div>
                        <div v-else>
                            <p>没有相关的疾病圈信息。</p>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script setup lang="ts">
import homeTop from '@/components/homeTop/index.vue'
import dayjs from 'dayjs'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { findDepartment, findSickCircleList } from '@/api/homeapi/patient'

const router = useRouter()
const dataList: any = ref([])
const sickCircleList:any = ref([]) // 疾病圈列表
const active = ref(0) // 当前激活的标签索引
const isLoading = ref(true);


// 获取科室列表
const getDepartments = async () => {
    try {
        const res = await findDepartment();
        dataList.value = res.data.result;
        // await Promise.all(dataList.value.map((item: { id: string }, index) => loadSickCircle(item.id, index)))
        await Promise.all(dataList.value.map((item:any, index:number) => loadSickCircle(item.id, index)));
    } catch (error) {
        console.error('获取科室失败', error);
    } finally {
        isLoading.value = false; // 数据请求完成后，更新加载状态
    }
};


// 根据科室 ID 获取疾病圈列表
const loadSickCircle = async (departmentId:any, index:any) => {
    try {
        const page = 1
        const count = 6
        const res = await findSickCircleList(departmentId, page, count)
        sickCircleList.value[index] = res.data.result || []
        console.log(sickCircleList.value, 'jdjjd123');

    } catch (error) {
        console.error('获取疾病圈失败', error)
    }
}

onMounted(() => {
    getDepartments()
})

//跳转详情页
const goToDetail = (sickCircleId: any) => {
    console.log(sickCircleId);
    // router.push(`/noadoption/${sickCircleId}`);
    router.push({
        path: `/noadoption/${sickCircleId}`,
        query: {
            sickCircleId: sickCircleId
        }
    })
}
</script>